<template>
  <div v-loading="loading" :class="className"
    :style="{height:'calc(100vh - '+height+')',width:'calc(100vh + '+width+')'}" />
</template>

<script>
  import * as echarts from 'echarts';
  import EleResize from '@/assets/js/esresize';
  import {
    listCommodityTime,
    getCommodityTimes,
    listCommodityTimeBydateTime,
  } from "@/api/hd/commodityTime";

  require('echarts/theme/macarons') // echarts theme

  export default {
    mixins: [EleResize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '300px'
      },
      height: {
        type: String,
        default: '220px'
      },
      chartData: {
        type: Object,
        default: () => {
          return {

          }
        }
      },
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        chart: null,
        //X轴数据
        seriesData: [],
        //标题数量
        sum: 0,
        dataList: []
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.loading = true;
          listCommodityTimeBydateTime(val).then(response => {
            this.dataList = response.rows;
            // this.setOptions();

            let xAxis_data = this.dataList.map(item => {
              return item.dateTime
            });

            let series_data = this.dataList.map(item => {
              return item.price
            });
            this.setOptions(val, xAxis_data, series_data)
            // console.log(this.dataList)
            this.total = response.total;
            this.loading = false;
          });
        }
      }
    },
    created() {},
    mounted() {
      this.$nextTick(() => {
        this.initChart();
      });
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
      },
      setOptions(val, xAxis_data, series_data) {
        let legend_data = [];
        legend_data.push(val.name)
        this.chart.setOption({
          dataZoom: [{
            type: 'inside'
          }],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          legend: {
            data: legend_data
          },
          xAxis: [{
            type: 'category',
            data: xAxis_data,
            axisPointer: {
              type: 'shadow'
            }
          }],
          yAxis: [{
              type: 'value',
              name: val.name,
              // min: 0,
              // max: 250,
              // interval: 50,
              axisLabel: {
                formatter: '{value} ￥'
              }
            },
            // {
            //   type: 'value',
            //   name: 'Temperature',
            //   min: 0,
            //   max: 25,
            //   interval: 5,
            //   axisLabel: {
            //     formatter: '{value} °C'
            //   }
            // }
          ],
          series: [{
              name: val.name,
              type: 'bar',
              barWidth: 30, // 柱子宽度
              label: {
                show: true,
                position: "right", // 位置
                color: "#8E8E8E",
                fontSize: 20,
                distance: 70, // 距离
                // formatter: "{c} 平方米" // 这里是数据展示的时候显示的数据
              }, // 柱子上方的数值
              tooltip: {
                valueFormatter: function(value) {
                  return value + '￥';
                }
              },
              label: {
                show: true
              },
              data: series_data
            },
            // {
            //   name: 'Temperature',
            //   type: 'line',
            //   yAxisIndex: 1,
            //   tooltip: {
            //     valueFormatter: function(value) {
            //       return value + ' °C';
            //     }
            //   },
            //   data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            // }
          ]
        });
      }
    }
  }
</script>

<style lang="scss">
</style>
